import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { CalcComponent } from '../calc/calc.component';
import { ITabItem } from '../../commons/tab-item';

@Component({
    selector: 'app-root',
    /**
     * ViewEncapsulation.Emulated - 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，
     * 使得组件的样式不受外部影响。这是 Angular 的默认设置。
     * ViewEncapsulation.Native - 使用原生的 Shadow DOM 特性
     * ViewEncapsulation.None - 无 Shadow DOM，并且也无样式包装
     * 
     * ViewEncapsulation.None 设置的结果是没有 Shadow DOM，并且所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉。
     * 
     * ViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为 样式类创建了一个 [_ngcontent-cmy-0] 选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用来实现局部的样式。
     * 
     * ViewEncapsulation.Native 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染，
     * 详细参考：https://segmentfault.com/a/1190000008677532
     */
    encapsulation: ViewEncapsulation.None,
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    /**
     * 详细参考：https://segmentfault.com/a/1190000008695459
     * 通过@ViewChild装饰器可以最便利的获取到组件模块中的元素
     */
    @ViewChild(CalcComponent)
    private calcComponent: CalcComponent;

    public tabItems: ITabItem[] = [
        {
            title: "计算",
            icon: "fa fa-calculator"
        }, {
            title: "设置",
            icon: "fa fa-cog"
        }, {
            title: "关于",
            icon: "fa fa-tasks"
        }
    ];

    public tabIndex: number = 0;

    public settingChange() {
        this.calcComponent.calc();
    }
}
